<template>
  <div class="allscenicpage">
    <div class="scenicTit">
      <div
        style="
          margin-left: 10px;
          margin-top: 20px;
          font-size: 20px;
          color: rgb(64, 158, 255);
          font-weight: bold;
        "
      >
        景点详情
      </div>
    </div>
    <div class="allscenicDetails">
      <div class="scenicImg">
        <img :src="scenic.scenicCoverUrl" width="100%" height="100%" />
      </div>
      <div class="scenicContent">
        <div class="scenicContent-1">{{ scenic.scenicName }}</div>
        <div class="scenicContent-2">
          <div>类型：{{ scenic.scenicType }}</div>
          <div style="margin-left: 50px">
            更新日期：{{ scenic.createdTime.split("T")[0] }}
          </div>
        </div>
        <div
          style="width: 100%; height: 80%; background-color: rgb(243, 243, 243)"
        >
          <div class="scenicContent-3">
            <div style="font-weight: 700">简介</div>
            <div style="font-weight: 570">
              {{ scenic.scenicDescription }}
            </div>
          </div>
        </div>
      </div>
      <div class="allscenicpage-right">
        <div class="downloadsNum">
          <div style="font-size: 24px; font-weight: bold">
            {{ scenic.downloadsNum }}
          </div>
          人下载
        </div>
        <div>
          <el-button
            type="primary"
            style="height: 60px; width: 150px"
            @click="downloadStrategy"
            >点击下载PDF文件</el-button
          >
        </div>
        
      </div>
    </div>
    <div class="reminder">
      旅鸽攻略中旅行贴士和照片等信息都来自于旅行者的真实分享，感谢旅鸽对本攻略的贡献
    </div>
    <div class="scomment">
      <scomment :uid="myId" :pid="scenic.scenicId"></scomment>
    </div>
    
  </div>
</template>

<script>
import { downloadStrategy } from "@/api/scenic";
import Link from "@/layout/components/Sidebar/Link.vue";
import scomment from "@/views/comment/seniccomment/index.vue"
export default {
  components: { Link,scomment },
  data() {
    return {
      myId:this.$store.getters.userId,
      downFile: {
        id: "",
        savePath: "C:/Users/acoffee/Desktop/"
      },
      scenic: {
        scenicId: "",
        scenicName: "",
        scenicType: "",
        scenicDescription: "",
        scenicCoverUrl: "",
        strategyUrl: "",
        createBy: "",
        createdTime: "",
        downloadsNum: 0,
      },
    };
  },
  created() {
    this.scenic = this.$route.query.item;
    this.downFile.id = this.$route.query.item.scenicId;
  },
  methods: {
    downloadStrategy() {
      downloadStrategy(this.downFile).then((res) => {
        if (res.code == 200) {
          console.log(res)
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.scenicContent {
  width: 40%;

  margin-top: 3%;
  margin-left: 3%;
}
.scenicContent-1 {
  height: 10%;
  font-size: 30px;
  font-weight: 500;
}
.scenicContent-2 {
  display: flex;
  height: 7%;
  font-size: 18px;
  font-weight: 400;
  margin-top: 5px;
  font-family: "KaiTi";
  color: #8a949e;
}
.scenicContent-3 {
  height: 80%;
  width: 95%;
  font-size: 15px;
  margin-left: 13px;
  font-family: "KaiTi";
  line-height: 30px;
}
.scenicTit {
  height: 30px;
  width: 80%;
  margin-left: 10%;
}
.allscenicDetails {
  display: flex;
  width: 80%;
  /* background-color: red; */
  height: 500px;
  margin: 0 auto;
}
.scenicImg {
  width: 30%;
  height: 450px;
  margin-left: 3%;
  margin-top: 3%;
}
.reminder {
  display: flex;
  width: 80%;
  color: #768391;
  /* background-color: red; */
  margin-bottom: 100px;
  margin-left: 10%;
  justify-content: center;
  font-family: "KaiTi";
}
.downloadsNum {
  display: flex;
  height: 10%;
  margin-top: 18%;
}
.allscenicpage-right {
  display: flex;
  width: 20%;
  flex-direction: column;
  margin-left: 35px;
}
.scomment {
  margin-left:100px;
  width: 80%
}
</style>
